<template>
<div id="title" class="title">
  <ul :class="this.flag===true ? 'nav' : '' ">
    <li><router-link to="/"><img src="../assets/img/logo.jpg" alt=""></router-link></li>
    <li><router-link to="/singer">歌手</router-link></li>
    <li><router-link to="/songList">榜单</router-link></li>
    <li><router-link to="/mine">我的</router-link></li>
    <li><router-link to="/search">搜索</router-link></li>
  </ul>
</div>
</template>

<script>
export default {
name: "mytitle",
  data(){
    return{
      flag:false,

    }
  },
  methods:{
    handleScroll () {
      let scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      // console.log(scrollTop)
      let clientHeight = document.querySelector('#title').clientHeight
      scrollTop > clientHeight ? this.flag=true : this.flag=false
    }
  },
  mounted(){
    window.addEventListener('scroll',this.handleScroll)

  }
}
</script>

<style scoped lang="less">
ul{
  list-style: none;
}
.title {
  .nav{
    position: fixed;
    top: 0;
    z-index: 100;
  }
  ul{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 50px;
    font-size: 16px;
    background: #f9f9f9;
    color: #999;
    position: relative;
    img{
      height: 30px;
    }
  }

}
</style>